<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>

</head>
<!-- 
    需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
    需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
-->



<!-- 
    自定义指令总结：
        一、定义语法
            1.局部指令：
                new Vue({                                
                    directives:{指令名:配置对象}    或    directives:{指令名:回调函数}
                })
            2.全局指令：
                Vue.directive(指令名:配置对象)    或   Vue.directive(指令名:回调函数)
        二、配置对象中的回调
                1.bind:指令与元素成功绑定时调用
                2.inserted：指令在所有元素被插入页面时调用
                3.update：模板结构在重新解析时调用
        三、备注：
                1.指令定义时不加v-,使用时加
                2.指令名如果是多个单词，要使用user-name命名方式
 -->
<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前n的值为：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值为：<span v-big-number="n"></span></h2>
        <button @click="n++">点击n值加1</button>
        <br>
        <input type="text" v-fbind:value="n">
    </div>

    <script>
        Vue.config.productionTip = false;
        // Vue.directive("big", function(element, binding){
        //         element.innerText = binding.value * 10;
        //     });
        new Vue({
            el: "#root",
            data: {
                name:"尚硅谷",
                n:1
            },
            directives:{
                "big-number"(element, binding){
                element.innerText = binding.value * 10;
                },
                fbind:{
                    bind(element,binding){
                        element.value = binding.value;
                    },
                    inserted(element,binding){
                        element.focus();
                    },
                    update(element,binding) {
                        element.value = binding.value;
                    }
                }
            }
        })
    </script>
</body>

</html>